import { useState, useEffect } from "react";
import * as Three from "three";

import { initValue, props } from "../types";

export function AudioBars(props: initValue & props) {
  const [countData, setCountData] = useState<Array<{ color: Three.Color }>>([]);

  const init = () => {
    let groups: Array<{ color: Three.Color }> = [];
    for (let index = 0; index < props.countData; index++) {
      groups.push({ color: new Three.Color(0x00ffff) });
    }
    setCountData(groups);
  };
  useEffect(init, []);
  return (
    <>
      <group>
        {countData.map((i, index) => (
          <group
            key={index}
            position={
              new Three.Vector3(
                Math.sin(((index * Math.PI) / props.countData) * 2) *
                  props.radius,
                Math.cos(((index * Math.PI) / props.countData) * 2) *
                  props.radius,
                0
              )
            }
            rotation={
              new Three.Euler(
                0,
                0,
                ((-index * Math.PI) / props.countData) * 2,
                "XYZ"
              )
            }
          >
            <mesh position={new Three.Vector3(0, 0.5, 0)} scale={1}>
              <boxGeometry args={[1, 1, 1]}></boxGeometry>
              <meshPhongMaterial color={i.color}></meshPhongMaterial>
            </mesh>
          </group>
        ))}
      </group>
    </>
  );
}
